import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import { SetOutline, MessageOutline } from 'antd-mobile-icons'
import myimg from '../../images/myimg.jpg';
import myvip from '../../images/myvip.jpg';
import { shopcarlist,shoplist } from "../../api/index"

import { UserSetOutline, BankcardOutline, FileOutline, CalendarOutline, HeartFill, StarOutline, PhoneFill, GiftOutline, FireFill } from 'antd-mobile-icons'

export default class My extends Component {

    async componentDidMount() {
        let res = await shopcarlist()
        this.getlist()
        this.setState({
            num: res.data.data.length
        })
    }

    getlist = async () => {
        let res = await shoplist()
        this.setState({
          shoplist: res.data.data
        })
    }

    state = {
        num: 0,

        mylist3: [
            {
                icon: <UserSetOutline />,
                name: '我的医生',
                path: '/mydoctor'
            }
            ,
            {
                icon: <BankcardOutline />,
                name: '我的设备',
                path: '/app/shop'
            },
            {
                icon: <FileOutline />,
                name: '健康计划',
                path: '/app/list'
            },
            {
                icon: <CalendarOutline />,
                name: '健康测评',
                path: '/app/my'
            },
            {
                icon: <HeartFill />,
                name: '姨妈助手',
                path: '/app/home'
            }
            ,
            {
                icon: <StarOutline />,
                name: '我的收藏',
                path: '/app/shop'
            },
            {
                icon: <PhoneFill />,
                name: '美洽客服',
                path: '/app/list'
            },
            {
                icon: <GiftOutline />,
                name: '有奖推荐',
                path: '/app/my'
            },
            {
                icon: <FireFill />,
                name: '关于美洽医生',
                path: '/app/my'
            }
        ],
        isShow: localStorage.getItem('isShow') || false,
        img: localStorage.getItem('img') || myimg,
        username: localStorage.getItem('username') || '登录与注册',
    }

    login = () => {
        this.props.history.push('/login')
        window.localStorage.clear()
    }

    //订单页面
    order = () => {
        this.props.history.push('/order')
    }

    render() {
        const { mylist3 } = this.state
        const { img, username, isShow } = this.state
        return (
            <div className='my'>
                <header>
                    <p></p>
                    <p></p>
                    <p>
                        <span> <SetOutline /></span>
                        <span><MessageOutline /></span>
                    </p>
                </header>
                <main>
                    <div className="mylist">
                        <dl>
                            <dt>
                                <img src={img} alt="" />
                            </dt>
                            <dd>
                                <p onClick={() => { this.login() }}>
                                    {username}
                                </p>
                                <p>
                                    <NavLink to='#'>
                                        账户管理》
                                     </NavLink>
                                </p>
                            </dd>
                        </dl>

                    </div>
                    <div className="myvip">
                        <img src={myvip} alt="" />
                    </div>
                    <div className="mylist2">
                        <h4>
                            <p>100000000</p>
                            <p>账户余额(元)</p>
                        </h4>
                        <h4>
                            <p>0</p>
                            <p>优惠券(张)</p>
                        </h4>
                        <h4>
                            <p>0</p>
                            <p>金币</p>
                        </h4>
                    </div>
                    {/* 我的订单 */}
                    <div className='mylist4' style={{ display: isShow ? 'block' : 'none' }}>
                        <h2 ><span>我的订单</span><span onClick={() => { this.order() }} >查看全部》</span></h2>
                        <h3>注意接收 <b>{this.state.num}</b>条订单</h3>
                    </div>
                    {/* <div className='mylist5' style={{ display: isShow ? 'block' : 'none' }}>
                        <h2><span>健康文档</span><span onClick={() => { this.order() }} >查看全部》</span></h2>
                    </div> */}
                    <div className="mylist3">
                        <h2>
                            工具与服务
                        </h2>
                        <h4>
                            {
                                mylist3.length && mylist3.map((item, idx) => {
                                    return <NavLink key={idx} to={item.path}>
                                        <p>{item.icon}</p>
                                        <p>{item.name}</p>
                                    </NavLink>
                                })
                            }
                        </h4>
                    </div>
                </main>
            </div>
        )
    }
}
